<template>
	<view class="">
		<view class="sort-box">
			<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;">
				<view v-for="(item,index) in tabNav" :key="index" :class="['sort',tabNavOn==index?'sort-on':'']"
					@click="changeTabnav(item,index)">{{item.name}}({{item.num}})</view>
			</scroll-view>
		</view>
		<!-- 供应链 -->
		<view class="list supplychain" v-if="type==1">
			<view class="item" v-for="(item,index) in SupplyList"
				@click="toPage('/pages/details/supplyChain/supplyChain?id='+item.id)">
				<!-- <view class="acea-row row-middle row-between top-info">
					<view>3天内更新</view>
					<view class="close">×</view>
				</view> -->
				<view class="acea-row row-middle row-between sell-goods">
					<view class="goods-img">
						<image :src="item.image" mode="" class="img"></image>
						<view class="tag line1">
							好货上新
						</view>
						<!-- <view class="acea-row row-middle distance">
							<image src="@/static/images/location.png" mode=""></image>
							<text>距您1.4km</text>
						</view> -->
					</view>
					<view class="acea-row row-column-between goods-info">
						<view class="title line2">
							{{ item.name }} | {{ item.categoryName }} | {{ item.stock }}套
						</view>
						<view class="sell-price">
							售价：<text>{{ item.price }}</text>元
						</view>
						<view class="gold-coin">
							<image src="@/static/images/goldcoin_icon.png" mode=""></image>
							<view class="num">25800</view>
						</view>
						<view class="acea-row goods-tag">
							<view class="tag">关键词1</view>
							<view class="tag">关键词2</view>
						</view>

					</view>
				</view>

				<view class="acea-row row-middle row-between visit-box">
					<view class="visit-advtar-box">
						<view class="visit-advtar">
							<image src="@/static/images/f.png" mode="" v-for="(item,index) in visitInfo" :key="index"
								:style="{left: (30 * index) + 'rpx'}"></image>
						</view>
						<view class="visit-num">18288人浏览 已成功匹配12254人</view>
					</view>

					<view class="visit-l">
						<view class="visit-num">5866人咨询</view>
						<view class="visit-btn" @click="toConcat(item.contacts)">
							立即咨询
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 选址 -->
		<view class="list rent-ask" v-if="type==2">
			<view class="item" v-for="(item,index) in GroupList" :key="item.id">
				<!-- <view class="acea-row row-middle row-between top-info">
					<view></view>
					<view class="close">×</view>
				</view> -->
				<view class="title line1">
					{{ item.title }}
				</view>
				<view class="acea-row goods-tag">
					<view class="tag" v-for="storeAdvantage in item.storeAdvantage" :key="storeAdvantage">
						{{storeAdvantage}}</view>
				</view>
				<view class="acea-row row-between row-middle contact-box">
					<view class="acea-row row-middle contact-info">
						<image src="@/static/images/f.png" mode=""></image>
						<view class="name">
							<view class="line1">联系人：{{ item.contacts[0].contactName }}</view>
							<view class="line1">
								联系电话：{{ item.contacts[0].contactPhone ? item.contacts[0].contactPhone.replace(/(\d{3})\d*(\d{4})/,'$1****$2') : '无' }}
							</view>
						</view>
					</view>
					<view class="visit-l">
						<view class="visit-num">5866人咨询</view>
						<view class="visit-btn">
							立即咨询
						</view>
					</view>
				</view>
				<view class="acea-row row-middle distance">
					<image src="@/static/images/location_gray.png" mode=""></image>
					<text>距您{{ item.distance * 0.001 }}km</text>
				</view>
				<!-- 浏览、咨询统计 -->
				<view class="acea-row row-middle row-between visit-box">
					<view class="visit-advtar">
						<image src="@/static/images/f.png" mode="" v-for="(item,index) in visitInfo" :key="index"
							:style="{left: (20 * index) + 'rpx'}"></image>
					</view>
					<view class="acea-row row-middle row-between visit-l">
						<view class="visit-num">{{ item.view || 0 }}人浏览</view>
						<view class="visit-num">已成功匹配9888人</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 布点 -->
		<view class="list all" v-if="type==4">
			<view class="item" v-for="item in PointList" :key="item.id">
				<!-- <view class="acea-row row-middle row-between top-info">
					<view></view>
					<view class="close">×</view>
				</view> -->
				<view class="acea-row row-middle row-between sell-goods">
					<view class="goods-img">
						<image :src="item.image" mode="" class="img"></image>
					</view>
					<view class="acea-row row-column-between goods-info">
						<view class="acea-row row-middle row-between title">
							{{ item.storename }}
						</view>
						<view class="acea-row row-middle goods-type">
							<view class="">
								{{ item.business }}
							</view>
							<view class="gray-light">
								￥{{ item.consumption || 0 }}/人
							</view>
						</view>
						<view class="goods-type">
							面积 {{ item.area || 0 }}㎡
						</view>
						<view class="acea-row row-middle starts">
							<image src="/static/images/startRed.png" mode="" v-for="img in item.avgScore" :key="img">
							</image>
							<view class="">{{ item.avgScore }}分</view>
						</view>
						<view class="gray-light">
							{{ item.address }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 加盟 -->
		<view class="list all" v-if="type==3">
			<view class="item" v-for="item in AgentList" :key="item.id">
				<!-- <view class="acea-row row-middle row-between top-info">
					<view></view>
					<view class="close">×</view>
				</view> -->
				<view class="acea-row row-between sell-goods">
					<view class="goods-img">
						<image :src="item.image" mode="" class="img"></image>
					</view>
					<view class="acea-row row-column-between goods-info">
						<view class="acea-row row-middle row-between title">
							{{ item.title }}
						</view>

						<view class="sell-price">
							<text>{{ item.franchiseFee }}</text>万元
						</view>
						<view class="gray-light">
							加盟城市：{{ item.franchiseRegion }}
						</view>
						<view class="gray-light">
							{{ item.address }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 品牌故事 -->
		<view class="list" v-if="type==5">
			<view class="item story-text" v-for="item in StoryList">
				{{ item.brandStory }}
			</view>
		</view>
		<!-- 点击展开更多 -->
		<view class="acea-row row-middle row-center loaded-more" v-if="needMore">
			<image src="../../static/images/loaded_more.png" mode="" v-if="moreStatu"></image>
			<view @click="moreStatu ? getExpandMore(true) : ''">{{ moreStatu ? '点击展开更多' : '已加载全部数据'}}</view>
		</view>

	</view>
</template>

<script>
	import {
		SecondhandAdd
	} from '@/api/supplyChain.js'
	import {
		getGroupListApi
	} from '@/api/subletOfShop.js'
	import {
		getAgentListApi,
		getStoryListApi
	} from '@/api/brand/index.js'
	import {
		getPointListApi
	} from '@/api/point.js'
	import {
		getLocation
	} from '@/filters/commFilter.js'
	import {
		toPage
	} from '@/filters/commFilter.js';
	export default {
		/* type 1 供应链
			2 选址
			3 加盟
			4 布点
			5 品牌故事 */
		props: {
			tabNav: {
				type: Array,
				default: () => {
					return []
				}
			},
			tabNavOns:{
				type: Number,
				default: 0
			},
			brandId: {
				type: String,
				default: null
			},
			needMore:{
				type: Boolean,
				default: true
			}
		},
		watch:{
			tabNav:{
				handler(){
					if(this.tabNav.length>0){
						this.changeTabnav(this.tabNav[0],0);
					}
				},
				immediate: true,
				deep:true
			},
		
		},
		data() {
			return {
				tabNavOn: 0,
				visitInfo: [1, 2, 3, 1, 1, 1, 1, 1],
				SupplyList: [], //供应链列表
				GroupList: [], //选址列表
				AgentList: [], //加盟列表
				type: '5',
				page: 1,
				totalPage: 1,
				moreStatu: true,
				PointList: [], //布点列表
				StoryList: [], //品牌故事列表
			}
		},
		mounted() {
			this.tabNavOn = this.tabNavOns;
			this.getSupplyList(this.brandId, false);
			
		},
		methods: {
			toPage,
			changeTabnav(item, index) {
				console.log("itemeeeee",item)
				this.SupplyList = [] //供应链列表
				this.GroupList = [] //选址列表
				this.AgentList = [] //加盟列表
				this.PointList = [] //布点列表
				this.StoryList = [] //品牌故事列表
				this.type = item.type;
				this.tabNavOn = index;
				this.page = 1;
				this.getExpandMore(false);
			},
			getExpandMore(more) {
				this.page = more ? (this.page + 1) : 1;
				switch (this.type) {
					case '1':
						this.getSupplyList(this.brandId)
						break;
					case '2':
						this.getGroupList(this.brandId)
						break;
					case '3':
						this.getAgentList(this.brandId)
						break;
					case '4':
						this.getPointList(this.brandId)
						break;
					case '5':
						this.getStoryList(this.brandId)
						break;
					default:
						break;
				}
			},
			//获取展开状态
			getPageStatu(totalPage) {
				if (this.page >= totalPage) this.moreStatu = false
				else this.moreStatu = true
			},
			//获取供应链列表
			async getSupplyList(brandId) {
				uni.showLoading({
					title: '加载中'
				})
				try {
					let {
						data
					} = await SecondhandAdd({
						brandId,
						page: this.page,
						limit: 2
					});
					this.SupplyList = [...this.SupplyList, ...data.list];
					this.getPageStatu(data.totalPage);
				} catch (e) {
					//TODO handle the exception
				}
				uni.hideLoading()
			},
			//获取选址列表
			async getGroupList(brandId) {
				uni.showLoading({
					title: '加载中'
				})
				try {
					let {
						latitude,
						longitude
					} = await getLocation();
					let {
						data
					} = await getGroupListApi({
						brandId,
						limit: 2,
						page: this.page,
						latitude,
						longitude
					});

					let list = data.list.map(item => {
						item.storeAdvantage = item.storeAdvantage.split('/');
						item.distance = (Number(item.distance) * 0.001).toFixed(0);
						return item
					})
					this.GroupList = [...this.GroupList, ...list];
					this.getPageStatu(data.totalPage);
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
				uni.hideLoading()
			},
			//获取加盟列表
			async getAgentList(brandId) {
				uni.showLoading({
					title: '加载中'
				})
				try {
					let {
						data
					} = await getAgentListApi({
						brandId,
						page: this.page,
						limit: 2
					});
					const list = data.list.map(item => {
						item.image = item.image.replace('/h', 'h');
						item.franchiseRegion = item.franchiseRegion.split(',').join(' | ');
						return item
					})
					this.AgentList = [...this.AgentList, ...data.list];
					this.getPageStatu(data.totalPage);
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
				uni.hideLoading()
			},
			//获取布点列表
			async getPointList(brandId) {
				try {
					let {
						data
					} = await getPointListApi({
						brandId,
						page: this.page,
						limit: 2
					});
					const list = data.list.map(item => {
						item.avgScore = item.avgScore || 0;
						item.avgScore = Math.floor(Number(item.avgScore))
						return item
					});

					this.PointList = [...this.PointList, ...data.list];
					this.getPageStatu(data.totalPage);
				} catch (e) {
					//TODO handle the exception
				}
			},
			//获取品牌故事
			async getStoryList(brandId) {
				uni.showLoading({
					title: '加载中'
				})
				try {
					let {
						data
					} = await getStoryListApi({
						brandId,
						page: this.page,
						limit: 2
					});
					this.StoryList = [...this.StoryList, ...data.list];
					this.getPageStatu(data.totalPage);
				} catch (e) {
					//TODO handle the exception
				}
				uni.hideLoading()
			},
			toConcat(contact) {
				if (!contact || contact.length < 1) {
					this.$util.Tips({
						title: '暂未获取到联系人'
					})
					return;
				}

				getApp().globalData.into_singleChatRoom({
					phone:contact[0].contactPhone,
					contactId:contact[0].contactId,
				})
			},
		}
	}
</script>

<style lang="scss">
	.loaded-more {
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(166, 166, 166, 1);

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 6rpx;
		}
	}

	.sort-box {
		width: 100%;
		padding: 0rpx 30rpx;
		background: #ffffff;

		.sort {
			display: inline-block;
			white-space: nowrap;
			padding: 24rpx 0rpx;
			font-size: 30rpx;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			border-bottom: 1px solid rgba(231, 231, 231, 1);
			margin-right: 42rpx;
		}

		.sort-on {
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(238, 33, 45, 1);
		}
	}

	.story-text {
		font-size: 26rpx;
		font-weight: 400;
		line-height: 44rpx;
		color: rgba(128, 128, 128, 1);
	}

	// 列表
	.list {
		padding: 32rpx;

		.item {
			margin-bottom: 32rpx;
			border-radius: 10rpx;
			background: #ffffff;
			padding: 24rpx;
			overflow: hidden;

			.top-info {
				margin-bottom: 16rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(191, 186, 186, 1);

				.close {
					font-size: 36rpx;
				}
			}

		}

		.item:last-child {
			margin-bottom: 0;
		}
	}

	// 全部、布点
	.all {
		.sell-goods {
			.goods-img {
				width: 256rpx;
				height: 240rpx;
				border-radius: 10rpx;
				overflow: hidden;
				position: relative;
				background-color: #cccccc;

				.img {
					width: 100%;
					height: 100%;
				}

				.tag {
					padding: 0 6rpx;
					max-width: 356rpx;
					height: 36rpx;
					border-radius: 0px 10rpx 0px 10rpx;
					background: rgba(238, 33, 45, 1);
					font-size: 26rpx;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					position: absolute;
					top: 0;
					left: 0;
				}

				.tag-green {
					padding: 0 6rpx;
					max-width: 356rpx;
					height: 36rpx;
					border-radius: 0px 10rpx 0px 10rpx;
					background: #43CF7C;
					font-size: 26rpx;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					position: absolute;
					top: 0;
					left: 0;
				}

				.distance {
					width: 100%;
					padding: 12rpx;
					background: rgba(0, 0, 0, .3);
					font-size: 22rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);

					image {
						width: 14rpx;
						height: 18rpx;
						margin-right: 12rpx;
					}

					position: absolute;
					bottom: 0;
					left: 0;
				}
			}

			.goods-info {
				width: calc(100% - 268rpx);
				height: 240rpx;

				.gray-light {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
				}

				.gray-dark {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(128, 128, 128, 1);
				}

				.title-50 {
					width: 50%;
				}

				.title {
					width: 100%;
					font-size: 30rpx;
					font-weight: 500;
					color: rgba(56, 56, 56, 1);
				}

				.goods-type {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(56, 56, 56, 1);
				}

				.starts {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(238, 33, 45, 1);

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 6rpx;
					}
				}

				.sell-price {
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(238, 33, 45, 1);

					text {
						font-size: 36rpx;
						font-weight: 700;
					}
				}

				.transfer-price {
					margin-left: 18rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(56, 56, 56, 1);

					text {
						font-weight: 700;
					}
				}

				.gold-coin {
					width: 148rpx;
					max-width: 100%;
					padding: 4rpx 12rpx;
					// height: 36rpx;
					border-radius: 20rpx;
					background: rgba(255, 195, 0, 1);
					border: 1px solid rgba(255, 235, 59, 1);
					position: relative;

					image {
						width: 36rpx;
						height: 36rpx;
						position: absolute;
						left: 0;
						top: 0;
					}

					.num {
						margin-left: 36rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
					}
				}

				.goods-tag {
					.tag-tit {
						padding: 6rpx 0rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(250, 92, 103, 1);
					}

					.tag {
						white-space: nowrap;
						border-radius: 4px;
						background: rgba(255, 232, 234, 1);
						padding: 6rpx 8rpx;
						margin-right: 12rpx;
						margin-bottom: 6rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(238, 33, 45, 1);
					}

					.tag:last-child {
						margin-right: 0;
					}
				}
			}
		}

		// 适合场所

		.suitable-box {
			margin-top: 34rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(82, 104, 139, 1);

			// padding-bottom: 30rpx;
			// border-bottom: 1px solid rgba(238, 238, 238, 1);
			.suitable {
				display: inline-block;
				letter-spacing: 0.4rpx;
				padding: 10rpx;
				border-radius: 4rpx;
				background: rgba(248, 249, 253, 1);
				margin-left: 12rpx;
				white-space: nowrap;
			}
		}

		.visit-box {
			padding: 30rpx 0;
			margin-top: 30rpx;
			border-top: 1px solid rgba(238, 238, 238, 1);

			.visit-advtar-box {
				width: 70%;

				.visit-num {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
					margin-top: 26rpx;
				}

				.visit-advtar {
					width: 100%;
					height: 46rpx;
					position: relative;

					image {
						width: 46rpx;
						height: 46rpx;
						border-radius: 50%;
						position: absolute;
					}
				}
			}

			.visit-l {
				width: 30%;

				.visit-num {
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
					margin-bottom: 12rpx;
				}

				.visit-btn {
					width: 200rpx;
					height: 60rpx;
					line-height: 60rpx;
					opacity: 1;
					border-radius: 30rpx;
					background: rgba(238, 33, 45, 1);
					text-align: center;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
				}
			}


		}
	}

	// 选址
	.rent-ask {
		.title {
			width: 100%;
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(56, 56, 56, 1);
		}

		.goods-tag {
			margin-top: 18rpx;

			.tag {
				white-space: nowrap;
				border-radius: 4px;
				background: rgba(255, 232, 234, 1);
				padding: 6rpx 12rpx;
				margin-right: 12rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);
			}

			.tag:last-child {
				margin-right: 0;
			}
		}

		.contact-info {
			width: 70%;

			image {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
			}

			.name {
				width: calc(100% - 100rpx);
				height: 70rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(128, 128, 128, 1);
				margin-left: 24rpx;
			}
		}

		.visit-l {
			width: 30%;

			.visit-num {
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(166, 166, 166, 1);
				margin-bottom: 12rpx;
			}

			.visit-btn {
				width: 200rpx;
				height: 60rpx;
				line-height: 60rpx;
				opacity: 1;
				border-radius: 30rpx;
				background: rgba(238, 33, 45, 1);
				text-align: center;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
		}

		.distance {
			width: 100%;
			padding: 0 12rpx 12rpx;
			font-size: 22rpx;
			font-weight: 400;
			color: rgba(166, 166, 166, 1);

			image {
				width: 18rpx;
				height: 24rpx;
				margin-right: 6rpx;
			}
		}

		// 浏览咨询统计
		.visit-box {
			padding: 30rpx 0;
			margin-top: 30rpx;
			border-top: 1px solid rgba(238, 238, 238, 1);

			.visit-advtar {
				width: 40%;
				height: 46rpx;
				position: relative;

				image {
					width: 46rpx;
					height: 46rpx;
					border-radius: 50%;
					position: absolute;
				}
			}

			.visit-l {
				width: 60%;
				height: 46rpx;

				.visit-num {
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
				}
			}

		}

	}

	// 供应链
	.supplychain {
		.sell-goods {
			.goods-img {
				width: 256rpx;
				height: 216rpx;
				border-radius: 10rpx;
				overflow: hidden;
				position: relative;
				background-color: #cccccc;

				.img {
					width: 100%;
					height: 100%;
				}

				.tag {
					padding: 0 6rpx;
					max-width: 356rpx;
					height: 36rpx;
					border-radius: 0px 10rpx 0px 10rpx;
					background: rgba(67, 207, 124, 1);
					font-size: 26rpx;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					position: absolute;
					top: 0;
					left: 0;
				}

				.distance {
					width: 100%;
					padding: 12rpx;
					background: rgba(0, 0, 0, .3);
					font-size: 22rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);

					image {
						width: 14rpx;
						height: 18rpx;
						margin-right: 12rpx;
					}

					position: absolute;
					bottom: 0;
					left: 0;
				}
			}

			.goods-info {
				width: calc(100% - 268rpx);
				height: 216rpx;

				.title {
					width: 100%;
					font-size: 30rpx;
					font-weight: 500;
					color: rgba(56, 56, 56, 1);
				}

				.sell-price {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(238, 33, 45, 1);

					text {
						font-size: 36rpx;
						font-weight: 700;
					}
				}

				.gold-coin {
					width: 148rpx;
					max-width: 100%;
					padding: 4rpx 12rpx;
					// height: 36rpx;
					border-radius: 20rpx;
					background: rgba(255, 195, 0, 1);
					border: 1px solid rgba(255, 235, 59, 1);
					position: relative;

					image {
						width: 36rpx;
						height: 36rpx;
						position: absolute;
						left: 0;
						top: 0;
					}

					.num {
						margin-left: 36rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
					}
				}

				.goods-tag {
					.tag {
						white-space: nowrap;
						border-radius: 4px;
						background: rgba(255, 232, 234, 1);
						padding: 6rpx 8rpx;
						margin-right: 12rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(238, 33, 45, 1);
					}

					.tag:last-child {
						margin-right: 0;
					}
				}
			}
		}

		.visit-box {
			padding: 30rpx 0;
			margin-top: 30rpx;
			border-top: 1px solid rgba(238, 238, 238, 1);

			.visit-advtar-box {
				width: 70%;

				.visit-num {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
					margin-top: 26rpx;
				}

				.visit-advtar {
					width: 100%;
					height: 46rpx;
					position: relative;

					image {
						width: 46rpx;
						height: 46rpx;
						border-radius: 50%;
						position: absolute;
					}
				}
			}

			.visit-l {
				width: 30%;

				.visit-num {
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
					margin-bottom: 12rpx;
				}

				.visit-btn {
					width: 200rpx;
					height: 60rpx;
					line-height: 60rpx;
					opacity: 1;
					border-radius: 30rpx;
					background: rgba(238, 33, 45, 1);
					text-align: center;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
				}
			}


		}
	}
</style>